<template>
	<uni-popup ref="invitation" type="center">
		<view class="exchange-wrap flex-a-c flex-j-a flex-column">
			<view v-if="arrList.is_bind != 1">
				<view class="tit">
					请输入口令码
				</view>
				<input class="invinput" placeholder="请输入口令红包码" v-model="code"
					placeholder-style="color: #999999;font-size: 28rpx;" />
				<view style="color: #999999;font-size: 22rpx;width:532rpx;padding-left: 12rpx;">
					绑定好友即可获得5大王币
				</view>
				<view class="btn-wrap">
					<view class="qxBtn" @tap="close">
						取消
					</view>
					<view class="btn flex-c-c" @click="$u.throttle(submit, 1000)">
						确认绑定
					</view>
				</view>
			</view>
			<view v-else>
				<view class="tit">
					已绑定
				</view>
				<view class="zhomhjian">
					<view class="touxiang">
						<image :src="arrList.parent_avatar" mode="scaleToFill" />
					</view>
					<view class="text_r">
						<view class="name_sty">用户昵称：{{ arrList.parent_name }}</view>
						<view class="id_sty">ID: {{ arrList.parent_id }}</view>

					</view>

				</view>
				<view style="width: 222rpx;
height: 66rpx;
background: #FFB02E;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;margin: 40rpx auto;line-height: 66rpx;
text-align: center;color: #fff;" @click="enterBtn">
					确定
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		arrList: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			code: "",

		};
	},
	methods: {
		close() {
			this.$refs.invitation.close()
		},
		open() {
			this.$refs.invitation.open()
		},
		enterBtn() {
			this.$refs.invitation.close()
		},
		submit() {
			if (!this.code) {
				this.$u.toast('邀请码不能为空')
				return;
			}
			let data = {
				invite_code: this.code,
			}
			this.$Request.post(this.$api.user.bindingQrcode, data).then(res => {
				this.$u.toast(res.msg)
				this.code = ""
				this.$refs.invitation.close()
				setTimeout(() => {
					this.$emit('userList')
				}, 1000)
				clearTimeout();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.exchange-wrap {
	width: 579rpx;
	height: 348rpx;
	background: #fff;
	border-radius: 20rpx;

	.zhomhjian {
		width: 400rpx;
		margin: auto;
		// background-color: red;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;

		.touxiang {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.text_r {
			width: 280rpx;
			height: 100rpx;
			margin-top: 20rpx;
			// background-color: aqua;

			.id_sty {
				width: 400rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 60rpx;
			}

			.name_sty {
				width: 400rpx;
				height: 60rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				line-height: 60rpx;
				overflow-x: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}


	.btn-wrap {
		display: flex;
		justify-content: space-around;
		width: 100%;

		.qxBtn {
			width: 40%;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			background: #ACACAC;
			border-radius: 16rpx;
		}

		.btn {
			width: 40%;
			height: 66rpx;
			background: #5191FF;
			border-radius: 16rpx;
		}
	}

	.txt {
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.invinput {
		width: 532rpx;
		height: 72rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.tit {
		font-size: 36rpx;
		text-align: center;
	}
}
</style>
